<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery-1.11.0.min.js"></script>
</head>
<body>

<table border="1" width="80%" id="tab">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>地址</th>
        <th>qq号</th>
        <th>邮箱</th>
        <th>生日</th>
        <th>操作</th>
    </tr>
<!--    <tr>-->
<!--        <td>1</td>-->
<!--        <td>1</td>-->
<!--        <td>1</td>-->
<!--        <td>1</td>-->
<!--        <td>1</td>-->
<!--        <td>1</td>-->
<!--        <td>1</td>-->
<!--        <td>1</td>-->
<!--        <td>-->
<!--            <a href="">编辑</a>-->
<!--            <a href="">删除</a>-->
<!--        </td>-->
<!--    </tr>-->

</table>

<div id="pages">

</div>

<script>
    function page(pageNum){
        //发送异步请求，查询分页数据
        let url = "/anli/user?action=findPage";
        let params = {pageNum:pageNum,size:3}
        $.get(url,params,function (data){
            //数据集展示 - 表格
            let users = data.data;

            //将表格数据恢复到初始状态
            $("#tab").html("<tr>\n" +
                "        <th>编号</th>\n" +
                "        <th>姓名</th>\n" +
                "        <th>性别</th>\n" +
                "        <th>年龄</th>\n" +
                "        <th>地址</th>\n" +
                "        <th>qq号</th>\n" +
                "        <th>邮箱</th>\n" +
                "        <th>生日</th>\n" +
                "        <th>操作</th>\n" +
                "    </tr>")

            $.each(users,function (idx,user){
                //每个user对象就向table中添加一行
                $("#tab").append("<tr>\n" +
                    "        <td>"+(idx+1)+"</td>\n" +
                    "        <td>"+user.name+"</td>\n" +
                    "        <td>"+user.gender+"</td>\n" +
                    "        <td>"+user.age+"</td>\n" +
                    "        <td>"+user.address+"</td>\n" +
                    "        <td>"+user.qq+"</td>\n" +
                    "        <td>"+user.email+"</td>\n" +
                    "        <td>"+user.bir+"</td>\n" +
                    "        <td>\n" +
                    "            <a href='edit.html?id="+user.id+"'>编辑</a>\n" +
                    "            <a href=''>删除</a>\n" +
                    "        </td>\n" +
                    "    </tr>")
            })

            //分页条处理
            $("#pages").html("")
            for (let i = data.begin; i <= data.end ; i++) {
                if (i == data.current){
                    $("#pages").append("<span style='padding-left: 5px;padding-right: 5px'>"+i+"</span>")
                }else{
                    $("#pages").append("<a href=\"javascript:void(0);\" onclick='page("+i+")' style='padding-left: 5px;padding-right: 5px'>"+i+"</a>")
                }
            }
        },"json");
    }


    //进入页面查询第一页数据
    page(1);
</script>

</body>
</html>